<template>
  <section>
    <p>ToDoList</p>
    <input type="text" placeholder="添加ToDo" v-model="title" @keyup.enter="add" />
  </section>
</template>

<script>
import { nanoid } from 'nanoid'
export default {
  name: "UserHeader",
  props:["addTodo"],
  data(){
    return{
      title:""
    }
  },
  methods: {
    add() {
      //校验数据，判断如果用户输入为空
      if(!this.title) return alert("输入不能为空,请重新输入")
      //将用户输入的内容包装成为一个todo对象
      let todoObj = { id: nanoid(), title:this.title, done:false}
      //通知App组件添加一个todo对象
      this.addTodo(todoObj);
      //清空输入
      this.title=""
    }
  },
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

body {
  background-color: #cdcdcd;
}

section {
  width: 600px;
  height: 50px;
  background: rgba(47, 47, 47, 0.98);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
}


section p {
  color: #ddd;
  font-size: 24px;
  cursor: pointer;
}

section input {
  width: 50%;
  text-indent: 10px;
  border-radius: 5px;
  box-shadow: 0 1px 0 rgb(255 255 255 / 24%), 0 1px 6px rgb(0 0 0 / 45%) inset;
  border: none;
  outline: none;
  padding: 5px 10px;
}
</style>